<template>
	<view class="login">
		<view class="login-head">
			<view class="head-box">
				<view class="logo">
					<image class="logoimg" src="../../static/img/logo.png" mode=""></image>
					<image @click="goback()" class="close" src="../../static/img/close.png" mode=""></image>
				</view>
				<view class="notes">
					<h4>
						欢迎来到
						<b>太平洋娱乐</b>
					</h4>
					<view class="sub">现在就开始你的游戏之旅吧!</view>
					<view class="title">注册账户</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="con">
				<view class="common">
					<input class="input" v-model="name" type="text" placeholder="用户名" placeholder-class="place" />
				</view>
				<view class="common">
					<input class="input" v-model="psd" :type="psdtype" placeholder="输入账户密码" placeholder-class="place" />
					<image class="mimashowhide" v-if="showmima" @click="changemimashowhide()" src="../../static/img/mimahide.png" mode=""></image>
					<image class="mimashowhide" v-else @click="changemimashowhide()" src="../../static/img/mimashow.png" mode=""></image>
				</view>
				<view class="common">
					<input class="input" v-model="comfirmpsd" :type="psdtype1" placeholder="确认账户密码" placeholder-class="place" />
					<image class="mimashowhide" v-if="showmima1" @click="changemimashowhide1()" src="../../static/img/mimahide.png" mode=""></image>
					<image class="mimashowhide" v-else @click="changemimashowhide1()" src="../../static/img/mimashow.png" mode=""></image>
				</view>
				<view class="common">
					<input class="input" v-model="paypsd" :type="psdtype2" placeholder="输入支付密码" placeholder-class="place" />
					<image class="mimashowhide" v-if="showmima2" @click="changemimashowhide2()" src="../../static/img/mimahide.png" mode=""></image>
					<image class="mimashowhide" v-else @click="changemimashowhide2()" src="../../static/img/mimashow.png" mode=""></image>
				</view>
				<view class="common">
					<input class="input" v-model="yqm" type="text" placeholder="推荐码/优惠码（选填）" placeholder-class="place" />
				</view>
				<view class="login-btn" @click="registers()">注 册</view>
				<view class="to-regist">
					<view class="left" @click="gologin()">
						还没有账户？<text>立即登录</text>
					</view>
					<image src="../../static/img/kefu.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { register } from '../../api/api.js'
	export default{
		data(){
			return{
				name:'',
				psd:'',
				comfirmpsd:'',
				paypsd:'',
				yqm:'',
				showmima:true,
				psdtype:'password',
				showmima1:true,
				psdtype1:'password',
				showmima2:true,
				psdtype2:'password'
			}
		},
		onLoad(o){
			console.log(o,'ccc')
			if(o.code){
				window.localStorage.setItem('code',o.code)
				this.yqm=o.code
			}
				let code=window.localStorage.getItem('code')
			if(code){
				this.yqm=code
			}
		},
		methods:{
			changemimashowhide(){
				if(this.showmima){
					this.showmima = false
					this.psdtype = 'text'
				}else{
					this.showmima = true
					this.psdtype = 'password'
				}
			},
			changemimashowhide1(){
				if(this.showmima1){
					this.showmima1 = false
					this.psdtype1 = 'text'
				}else{
					this.showmima1 = true
					this.psdtype1 = 'password'
				}
			},
			changemimashowhide2(){
				if(this.showmima2){
					this.showmima2 = false
					this.psdtype2 = 'text'
				}else{
					this.showmima2 = true
					this.psdtype2 = 'password'
				}
			},
			gologin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			goback(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			registers(){
				if(this.name == ''){
					uni.showToast({
						title: '请输入用户名',
						icon:'error',
						duration: 2000
					});
					return false
				}
				if(this.psd == ''){
					uni.showToast({
						title: '请输入密码',
						icon:'error',
						duration: 2000
					});
					return false
				}
				if(this.comfirmpsd != this.psd){
					uni.showToast({
						title: '两次密码不同',
						icon:'error',
						duration: 2000
					});
					return false
				}
				if(this.paypsd == ''){
					uni.showToast({
						title: '请输入支付密码',
						icon:'error',
						duration: 2000
					});
					return false
				}
				let datas = {
					name:this.name,
					password:this.psd,
					password_confirmation:this.comfirmpsd,
					qk_pwd:this.paypsd,
					invite_code:this.yqm
				}
				register(datas).then(res => {
					if(res.data.status.errorCode == 0){
						uni.showToast({
							title: res.data.status.msg,
							icon:'success',
							duration: 2000
						});
						// uni.setStorage({
						// 	key:'token',
						// 	data:res.data.data
						// })
						uni.reLaunch({
							url:'/pages/login/login'
						})
					}else{
						uni.showToast({
							title: res.data.status.msg,
							icon:'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style scoped>
	*{
		box-sizing: border-box;
	}
	.login{
		width: 100%;
		min-height: 100vh;
		background-color: #202327;
	}
	.login-head{
		width: 100%;
		height: 514rpx;
		background: url('../../static/img/loginbg.jpg') no-repeat center 50rpx;
		background-size: cover;
	}
	.head-box{
		width: 100%;
		padding: 32rpx 40rpx 0 40rpx;
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		flex-wrap: nowrap;
	}
	.logo{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.logo .logoimg{
		width: 148rpx;
		height: 80rpx;
	}
	.logo .close{
		width: 38rpx;
		height: 38rpx;
	}
	.notes{
		text-align: center;
		align-self: flex-end;
		margin-top: 108rpx;
		color: #fff;
	}
	h4{
		font-weight: 700;
		font-size: 34rpx;
		line-height: 40rpx;
	}
	b{
		color: #27d477;
	}
	.sub{
		line-height: 30rpx;
		color: #9ba6b3;
		font-size: 24rpx;
	}
	.title{
		text-align: right;
		font-weight: 900;
		font-size: 36rpx;
		margin-top: 52rpx;
	}
	.main{
		margin-top: -60rpx;
		position: relative;
	}
	.con{
		width: 100%;
		padding: 48rpx 40rpx 60rpx 40rpx;
		margin-top: 86rpx;
	}
	.common{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
		flex-wrap: nowrap;
		position: relative;
		margin-bottom: 20rpx;
	}
	.input{
		height: 100rpx;
		width: 100%;
		border: 0;
		padding: 24rpx 40rpx;
		border-radius: 4rpx;
		background: #1a1c20;
		overflow: visible;
		font-size: 28rpx;
		color: #fff;
	}
	.place{
		font-size: 24rpx;
		color: #7c7c7c;
	}
	.mimashowhide{
		width: 34rpx;
		height: 34rpx;
		padding: 0 16rpx;
		position: absolute;
		top: 50%;
		right: 16rpx;
		margin-top: -17rpx;
		box-sizing: content-box;
	}
	.remember-forget{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #fff;
	}
	/deep/ .uni-label-pointer{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	/deep/ .uni-checkbox-input{
		width: 26rpx;
		height: 26rpx;
		margin-right: 0;
		box-sizing: border-box;
		background-color: transparent;
		border-color: #33d47e;
		margin-top: -6rpx;
	}
	/deep/ .uni-checkbox-input svg{
		transform: translate(-50%, -48%) scale(0.5);
	}
	.remember-forget text{
		margin-left: 10rpx;
	}
	.login-btn{
		width: 100%;
		height: 64rpx;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 64rpx;
		border-radius: 12rpx;
		background: #fee619;
		font-weight: 700;
		color: #1c1e22;
		box-shadow: 0 8rpx 0 0 #d9a715, inset 0 0 24rpx 6rpx rgba(243, 48, 48, .34), 0 4rpx 12rpx 6rpx rgba(255, 123, 1, .34);
	}
	.to-regist{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.left{
		color: #97a6b4;
		font-size: 28rpx;
		font-weight: 600;
	}
	.left text{
		color: #33d47e;
		font-size: 32rpx;
	}
	.to-regist image{
		width: 34rpx;
		height: 32rpx;
	}
</style>